<template>
  <view class="reject-modal">
    <up-modal
      :show="props.show"
      title="审核驳回"
      :show-cancel-button="true"
      @confirm="handleConfirm"
      @cancel="handleCancel"
    >
      <view class="modal-content">
        <view class="car-plate">车牌号：{{ props.carPlate }}</view>
        <view class="reason-label">驳回原因：</view>
        <up-textarea
          v-model="reason"
          placeholder="请输入驳回原因"
          :maxlength="100"
          height="120"
          :count="true"
          class="reason-input"
        ></up-textarea>
      </view>
    </up-modal>
  </view>
</template>

<script setup>
import { ref } from 'vue';

// 定义props和emits
const props = defineProps({
  carPlate: {
    type: String,
    default: ''
  },
  show: {
    type: Boolean,
    default: false
  }
});

// 定义事件
const emit = defineEmits(['update:show', 'confirm', 'cancel']);

// 驳回原因
const reason = ref('');

// 确认按钮点击事件
const handleConfirm = () => {
  if (!reason.value.trim()) {
    uni.showToast({
      title: '请输入驳回原因',
      icon: 'none'
    });
    return;
  }
  
  emit('confirm', reason.value.trim());
  reason.value = '';
  emit('update:show', false);
};

// 取消按钮点击事件
const handleCancel = () => {
  emit('cancel');
  reason.value = '';
  emit('update:show', false);
};
</script>

<style scoped>
.reject-modal {
  /* 可以添加自定义样式 */
}

.modal-content {
  width: 100%;
  padding: 20rpx;
}

.car-plate {
  font-size: 32rpx;
  font-weight: bold;
  margin-bottom: 20rpx;
  color: #333;
}

.reason-label {
  font-size: 28rpx;
  margin-bottom: 10rpx;
  color: #666;
}

.reason-input {
  margin-top: 10rpx;
  width: 100%;
}
</style>